// src/components/ProtectedRoute.js
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';

/**
 * 受保护路由组件
 * @param {React.Element} element - 有权限时渲染的目标组件
 * @param {string[]} [requiredRoles] - 允许访问的角色列表（可选，如 ['admin', 'editor']）
 * @returns {JSX.Element} 目标组件或跳转组件
 */
export function ProtectedRoute({ element, requiredRoles }) {
    console.log( useAuth())
//   const { user } = useAuth();
//   const isLogin = !!user; // 是否登录

//   // 1. 未登录：跳转到登录页，并携带当前路径（redirectPath）
//   if (!isLogin) {
//     return <Navigate to="/login" state={{ redirectPath: window.location.pathname }} replace />;
//   }

//   // 2. 不需要角色权限：直接渲染目标组件
//   if (!requiredRoles || requiredRoles.length === 0) {
//     return element;
//   }

//   // 3. 需要角色权限：判断用户角色是否在允许列表中
//   const hasPermission = requiredRoles.includes(user.role); hasPermission
  if (true) {
    return element;
  }

  // 4. 无角色权限：跳转到无权限页
  return <Navigate to="/no-permission" replace />;
}